20 Useful CSS Menu Code Collection

1. Vertical Responsive Navigation

featured image

Vertical Responsive Navigation is a navigation component based in CSS and Javascript code.

More Details

2. Apycom jQuery Menus

Apycom jQuery Menus

Full cross-browser compatibility, Fully accessible even when javascript is turned off, as a pure css menu, Search engines optimized, Clear unordered list (LI and UL HTML tags) structure, Easy to setup and update, Fantastic animation and transition effects, Multiple pre-desinded color schemes, Completely customizable styling with CSS, Powered by jQuery,

Extremely small - 3kb uncompressed

More Details

3. Lynx - Responsive Menu

featured image

Lynx is a menu component based in CSS and Javascript code.Javascript/CSS effects

More Details

4. Interactive Menu with CSS3 and HTML5

featured image

Clean and elegant code. Documented code.

More Details

5. Flexy Menu - Responsive Horizontal & Vertical Menu

featured image

Flexy is a menu component based in CSS and Javascript code. You can use Flex Menu it as a horizontal or vertical menu. It is a responsive and collapsible menu, suitable for any type of website.Javascript/CSS effects

More Details

6. Animated Horizontal Submenu

featured image

Menu is made with HTML5, CSS3 and jQuery. Menu has HTML5 structure and works on all major browsers. Menu is easy to edit and integrate into any website. Menu works (the main structure is 100% same) on Internet Explorer 9, 8, 7… and a lot of old browsers but animation and some other CSS3 features do not work.Improved code

More Details

7. Negar - Responsive Vertical And Horizontal Menu

featured image

NEGAR – Responsive Animated Menu V2. Every Menu, An Animated Effect

EACH STYLE INCLUDES TWO HORIZONTAL MENU AND TWO VERTICAL MENU

Edit Code

Added Tow Vertical Menu (Left And Right Position) For Each Style

Added Two Horizontal Menu (Header And Footer) For Each Style

Aram – Responsive Mega DropDown Menu V2.

More Details

8. Metro Style CSS3 Menu

featured image

Metro Style CSS3 Menu

A Pure HTML5/CCS3 Metro Style Navigation Menu that fits well with any website or webpage. There are many key features which make this menu look extremely simplistic, yet very complex. Clean commented code

Only two main files needed, a CSS file and an HTML file. Extremely lightweight clean code which can be easily added to any website. There are only two changes to be made to change the colour scheme within the CSS file.

More Details

9. Shifty Nav - a Fully Responsive JS CSS3 Mega Menu

featured image

Shifty Nav is a fully responsive CSS3 mega menu. To change the color of the entire menu requires a simple changing of a few pre-defined variables, so there’s not extensive digging through the code!

This menu supports whatever kind of content you throw at it, and includes a full tutorial on how to build the markup for your own menu if you don’t want to modify the pre-existing file.Completely customizable menu layout

More Details

10. TAKO Vertical Responsive Dropdown Menu

featured image

This it’s a menu with 3 columns of pages with a very good design and color combinations and its compatible with mobile devices! Its very efficient for people who want a simple responsive menu with modern design.- We added the Mega-Menu design with the posibility to add forms, images and video in the dropdown!

- Also we added 360+ vector icons to put them in your menu items!

Fully commented and Clear Code

Easy to add new menu items

Mega-Menu Content:

- Mega-menu Content (complete forms, images, video and more!)

More Details

11. Navy - Responsive Menu

featured image

Navy is a menu component based in CSS and Javascript code. Navy is a menu builded to work with icons and is powered by the “Font-Awesome”. Navy is a responsive and collapsible menu, has 2 themes and 9 colors.Javascript/CSS effects

More Details

12. Navion - Metro Navigation Menu Accordion Switcher

featured image

Navion – Metro Navigation Menu Accordion Switcher CSS

Navion – Metro Navigation Menu Accordion Switcher CSS is a small CSS plugin that is used to create navigation menu for modern sites with responsive menu design feature. Navion CSS can be customized easily because it is only HTML and CSS code.Three Main HTML5 navigation menu vertical Sizes.Sub Menu with Dropdown and Metro Style.Tab in Sub Menu.If you like to see the plugin documentation you can check it here: Navion CSS Documentation

TileBox – Modern Responsive LightBox CSS

Tabion – Metro Tab Accordion Switcher CSS

OneMenu – Responsive Metro UI Menu

MenuStation – Unlimited Responsive Menu

Metro Navigation Bar CSS

More Details

13. Metro Style Pop-Out Navigation menu

featured image

A CSS navigation menu pop-out navigation that can be used as a navigation menu, a one page site or a combination of both.Easy options to configure the javascript to the way you want it and other areas are fully customizable in the css.lots of configurable options via javascript and css

minified and un-minified javascript and css files

quick start code to get you up and running straight away

More Details

14. GUGUL - Image Slider

featured image

Edit Code

Negar – Responsive Animated Menu

More Details

15. Stick it. HTML5 & CSS3 Sticky Footer

featured image

Clean design and code

Left, right and centered menu or content

Expandable bottom menu for special content

Inline comments through the code for additional help

More Details

16. Pull-Out Content Panel

featured image

The custom scrollbars packed in this menu will automatically appear when needed and if you need to add even more content, you can use the infinite carousel to scroll between each part of the panel. The package contains 6 HTML files showing different possibilities or usages of this panel and all the code is organized, indented and easy to read. This menu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.

More Details

17. Universal Responsive Mega Menu

featured image

This menu is the result of a combination of my best works on Codecanyon : I’ve put together a flexible mega menu system that can hold 12 sizes of drop downs, unlimited fly-out elements combined with a jQuery script to enhance the whole system. It can be used as a sticky footer HTML5 (with mega “drop-ups”) using the exact same markup as the “standard” mega menu. By using the example pages, you have all the necessary code ready to be used in your site. Customizing the menu require some basic knowledge of CSS and you can change the look of every part of the menu : the fonts, the colors, the sizes, etc. Fully Responsive Menu

Standard Top Menu

Sticky (or fixed) Top Menu

The package contains 2 folders : “Responsive” and “Non-Responsive” so the menu is ready to be included on any type of website. In each folder, all the code is organized, indented and easy to read. For each version of the menu, responsive and non-responsive, you have 6 HTML files with various examples of what you can do with the menu, from a vertical navigation menu CSS bar without drop downs to a combination of 2 mega menus on a same page. This menu has been tested on many devices and browsers to ensure a maximum compatibility : Internet Explorer, Firefox, Chrome, Opera, Safari have successfully passed the tests.The whole menu relies mainly on CSS, it means that if Javascript is disabled, most of the menu will work. Be sure to test the demo with different browsers or devices to make sure that the menu meets your requirements.I try to regularly update my products based on the feedback I receive, so if you find any kind of bug, I’ll do my best to update the menu as soon as possible. I’ve also created a website that compares and filters my different menus by options / features, Mega-Menu. If you’re still not sure about the menu that would fit into your project, you can contact me at any time from my profile page.

More Details

18. Responsive 3D CSS3 Menu

featured image

This 3d menu is CSS3 horizontal menu code.Ready to display any HTML code inside a menu tab

Clean design and code

We are ready to improve this code by your demands.

More Details

19. Elusive CSS3 Mega Menu

featured image

Elusive CSS3 Mega Menu

A Pure HTML5/CCS3 Mega CSS3 navigation menu vertical that fits well with any website or webpage. There are many key features which make this menu look extremely simplistic, yet very complex. Clean commented code

Only two main files needed, a CSS file and an HTML file. Extremely lightweight clean code which can be easily added to any website. There are only two changes to be made to change the colour scheme within the CSS file.

More Details

20. Responsive Megamenu

featured image

Responsive Megamenu is a menu component based in CSS and Javascript code.

More Details

21. Orion - Responsive Menu

featured image

Orion is a menu component based in CSS and Javascript code.

More Details